<template>
    <div class="page page-train-home page-full has-headbar">
        <head-bar :title="$route.meta.title" :prevRoute="{name: 'home'}" />
        <van-tabs v-model="tabActive" class="list-tab" type="card" @click="onTabClick">
          <van-tab title="精品">
            <list :public="0"></list>
          </van-tab>
          <van-tab title="公益">
            <!-- <list :public="1"></list> -->
          </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import { Tab, Tabs } from 'vant'
import List from './components/List'
import { wxjsdkMixin } from '@/components/mixins'
export default {
  mixins: [wxjsdkMixin],
  name: 'train-home',
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    List
  },
  data () {
    return {
      tabActive: 0
    }
  },
  mounted () {
    this.wechatHideMenu()
  },
  methods: {
    onTabClick (index) {
      if (index === 1) {
        this.tabActive = 0
        window.location.href = 'http://web.allelink.com.cn/jx_sport_gongyi/#/MatchList'
      }
    }
  }
}
</script>

<style lang="less">
.page-train-home {
  .search-section{
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .list-item{
    margin-top: 5px;
    margin-bottom: 5px;
  }
  /* tabs */
  .list-tab{
    height: 100%;
    box-sizing: border-box;
  }
  .van-tabs__nav--card{
    border-color: #cbcbcb;
    border-radius: 3px;
    width: 100px;
    margin: 0 auto;
    .van-tab{
      color: @fontColorPrimary;
      border-right: none;
      &.van-tab--active{
        color: #fff;
        border-radius: 2px;
      }
      &:first-child{
        &.van-tab--active{
          background-color: @colorPrimary;
        }
      }
      &:last-child{
        &.van-tab--active{
          background-color: @colorSuccess;
        }
      }
    }
  }
   .van-tabs__track {
    height: 100%;
  }
  .van-tabs__content{
    height: 100%;
    box-sizing: border-box;
    .van-tab__pane{
      height: 100%;
    }
  }
 .list-container{
   overflow: hidden;
   min-height: calc(100vh - @headBarHeight - 30px - 54px - 100px);
 }
}
</style>
